<template>
  <div id="landxq">  
    

  <el-form ref="form"  label-width="70px">           
      <el-row style="display:flex;">
          <el-page-header @back="goBack"   content=''  style="margin-top:10px;margin-bottom:20px;"></el-page-header>
          <div  style="display:flex;margin-bottom:10px;align-items: center;">
            <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
            <div style="line-height: 40px;font-weight:bold:">兑换查询</div>
          </div> 
      </el-row>

      <div style="display:flex;align-items: center;">
            <div style="width:50px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:10px;">筛选项</div> 

             <el-form-item label="生成时间">
                    <el-date-picker  type="date"   placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.onedate" style="width:140px;"> 
                    </el-date-picker>
              </el-form-item>

              <el-form-item label="标的类别" style="margin-left:10px;">
                <el-select  v-model="form.select1_num" :placeholder="'请选择' + variable_name4 +  '等级'" >
                    <el-option  v-for="(item,index) in select1_data" :key="index" :label="item.title" :value="item.maid"></el-option>
                </el-select>
             </el-form-item>

            <el-form-item label="标的状态" style="margin-left:10px;" >
                <el-select  v-model="form.select2_num" placeholder="请选择订单状态" >
                    <el-option  v-for="(item,index) in select2_data" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
 
            <div class="buttoon_box">
                <div class="buttoon_box_item"  style="margin-left:10px;background:#FFC600;color:white;" @click="search_but()">确 定</div>
                <div class="buttoon_box_item" style="margin-left:10px;border:1px solid #D9D9D9;" @click="refresh_but()">清 空</div>    
            </div>
     </div>

     <div class="exhibition">
           <div class="exhibition_top">数据展示</div>
           <div class="exhibition_con"> 
               <div class="exhibition_con_flex">
                  <div class="exhibition_con_flex_a">总数</div>
                  <div class="exhibition_con_flex_b">{{ count }}</div>
               </div>
               <div class="exhibition_con_flex">
                  <div class="exhibition_con_flex_a">已兑换</div>
                  <div class="exhibition_con_flex_b">{{ exchange_count }}</div>
               </div>
               <div class="exhibition_con_flex">
                  <div class="exhibition_con_flex_a">未兑换</div>
                  <div class="exhibition_con_flex_b">{{ no_exchange_count }}</div>
               </div>
               <div class="exhibition_con_flex">
                  <div class="exhibition_con_flex_a">已失效</div>
                  <div class="exhibition_con_flex_b">{{ count-exchange_count-no_exchange_count }}</div>
               </div>
           </div>
     </div>

     <!-- <el-row> 
          <el-col :span="12" style="display:flex;">
             <el-form-item label-width="0px" >
                <el-select  v-model="form.select1_num" :placeholder="'请选择' + variable_name4 +  '等级'" >
                    <el-option  v-for="(item,index) in select1_data" :key="index" :label="item.title" :value="item.maid"></el-option>
                </el-select>
             </el-form-item>

            <el-form-item  label-width="0px" style="margin-left:10px;" >
                <el-select  v-model="form.select2_num" placeholder="请选择订单状态" >
                    <el-option  v-for="(item,index) in select2_data" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
           <div class="custom_button2"  style="margin-left:10px;" @click="search_but()"></div>
        </el-col>
        <el-col :span="12" style="text-align: right;">
           <el-button class="custom_color_button" type="primary" @click="refresh_but()">刷新</el-button>
           <el-button class="custom_color_button" type="primary" >总数:{{ count }}</el-button>
           <el-button class="custom_color_button" type="primary" >已兑换:{{ exchange_count }}</el-button>
           <el-button class="custom_color_button" type="primary" >未兑换:{{ no_exchange_count }}</el-button>
           <el-button class="custom_color_button" type="primary" >已失效:aa</el-button>
        </el-col>  
       
    </el-row> -->
  </el-form>
   <!-- 渲染数据list -->
   <landxq-list :data="data" :data1="data1" @up_list_fun="list_fun"> </landxq-list>

   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

    

      
  </div>
</template>

<script>
import LandxqList from '@/view/Jindou/LandxqList'
export default {
  name: 'landxq',
  data () {
    return {
        data:[],
        data1:[],
        page:1,
        count:0,
        exchange_count:0,
        no_exchange_count:0,
        form:{
          select1_num:'',
          select2_num:'',
          onedate:''
        },
        select1_data:[],
        select2_data:[{"id":1,"name":"未兑换"},{"id":2,"name":"已兑换"},{"id":3,"name":"已失效"}],
        // start:'',
        // end:''
    }
  },
 components:{
    LandxqList
  },
  created(){
     this.list_fun()
     this.list_zy()
    //  this.start = this.$route.query.start
    //  this.end = this.$route.query.end
  },
  mounted (){
    
  },
  methods: {
      list_zy(){
        this.post("/manor/manorOption", {
        }).then(res => { 
            this.select1_data = res.result                          
        })
      },
      list_fun(){
      
        this.post("/gdb/listOfDetail", {
              page:this.page,
              gid:this.$route.query.gid,
              maid:this.form.select1_num,
              type:this.form.select2_num,
              onedate:this.form.onedate
	        }).then(res => {
              this.count = res.result.count
              this.data = res.result.list
              
              this.exchange_count = res.result.exchange_count
              this.no_exchange_count = res.result.no_exchange_count
              this.data1 = []
               for(let item of this.data) {
                  this.data1.push(item.init_price)                  
               }

              console.log(res,"bbb")
         })

    },
    search_but(){
        this.list_fun()
    },
    refresh_but(){
        this.form.select1_num = ''
        this.form.select2_num = ''
        this.form.onedate = ''
        this.page = 1
        this.list_fun()
    },
    goBack() {
        this.$router.go(-1)
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }

  }
}
</script>


<style scoped>
.buttoon_box{
  display:flex;margin-bottom:10px;
}
.buttoon_box_item{
  height:40px;line-height:40px;width:60px;font-size:14px;text-align:center;border-radius:5px;
}
.el-input-box>>>input{
  padding: 0px 3px !important;
}
.exhibition_top{
   height: 40px;
   background: #FF6B40;
   padding-left:70px;
   line-height: 40px;
   color:white;
}
.exhibition{
  margin-bottom:15px;
}
.exhibition_con{
   height: 150px;
   background: #FDFAF7;
   padding:0px 70px;
   display: flex;
}
.exhibition_con_flex{
  flex:1;
   display: flex;
   flex-flow: column;
   justify-content: center;
}
.exhibition_con_flex_a{
  font-size: 20px;
  font-weight: 500;
  color: #5E6C84;
}
.exhibition_con_flex_b{
  font-size: 45px;
  font-weight: 400;
  color: #344563
}
</style>
